<template>
  <nav class="navbar navbar-light">
    <div class="container">
      <NuxtLink to="/" class="navbar-brand ng-binding">conduit</NuxtLink>

      <!-- Show this for logged out users -->
      <ul
        show-authed="false"
        class="nav navbar-nav pull-xs-right"
        style="display: inherit;"
      >
        <li class="nav-item">
          <NuxtLink to="/" class="nav-link" exact>Home page</NuxtLink>
        </li>

        <li class="nav-item">
          <NuxtLink to="/login" class="nav-link">Sign In</NuxtLink>
        </li>

        <li class="nav-item">
          <NuxtLink to="/regist" class="nav-link">Sign Up</NuxtLink>
        </li>
      </ul>

      <!-- Show this for logged in users -->
      <ul
        show-authed="true"
        class="nav navbar-nav pull-xs-right"
        style="display: none;"
      >
        <li class="nav-item">
          <NuxtLink to="/" class="nav-link" exact>Home</NuxtLink>
        </li>

        <li class="nav-item">
          <NuxtLink to="/article/edit" class="nav-link">New Articale</NuxtLink>
        </li>

        <li class="nav-item">
          <NuxtLink to="/setting" class="nav-link">Settings</NuxtLink>
        </li>

        <li class="nav-item">
          <NuxtLink to="/user/crq" class="nav-link">Crq</NuxtLink>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {};
  },

  components: {},

  methods: {},
};
</script>

<style scoped></style>
